{% extends 'Web/layout_main.html.twig' %}

{% block myCss %}
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
{% endblock %}


{% block adBanner %}
    {#banner_ad_2#}
    <div class="mart20 marb20 bdso">
        <img class="w100" src="/web/img/banner_ad_1.jpg" alt="banner_ad_1">
    </div>
{% endblock %}

{% block main %}

    <div class="row mart10">
        <div class="col-md-2 col-xs-12 col-sm-12">
            <div class="list-group mart50">
                <a href="{{ path("WebPageInfo",{code:"ABOUT_INFO"}) }}" class="list-group-item {{ page.code == "ABOUT_INFO"?"active":"" }}"><span class="fa fa-caret-square-o-right"></span> 公司简介</a>
                <a href="{{ path("WebPageInfo",{code:"ABOUT_NEWS"}) }}" class="list-group-item {{ page.code == "ABOUT_NEWS"?"active":"" }}"><span class="fa fa-caret-square-o-right"></span> 企业新闻</a>
                <a href="{{ path("WebPageInfo",{code:"ABOUT_TEAM"}) }}" class="list-group-item {{ page.code == "ABOUT_TEAM"?"active":"" }}"><span class="fa fa-caret-square-o-right"></span> 团建活动</a>
                <a href="{{ path("WebPageInfo",{code:"ABOUT_CONTACT"}) }}" class="list-group-item {{ page.code == "ABOUT_CONTACT"?"active":"" }}"><span class="fa fa-caret-square-o-right"></span> 联系我们</a>
                <a href="{{ path("WebPageInfo",{code:"ABOUT_FEEDBACK"}) }}" class="list-group-item {{ page.code == "ABOUT_FEEDBACK"?"active":"" }}"><span class="fa fa-caret-square-o-right"></span> 意见反馈</a>
            </div>

        </div>
        <div class="col-md-10 col-sm-12 col-xs-12" style="min-height: 600px;">
            <h3>{{ page.title }}</h3>
            <div class="flrc flex-fill">
                <div class="line bdbso bdw3 bc1 marr1 padl3">&nbsp;</div>
                <div class="line bdbso bdw3 bc1 marr1 padl3">&nbsp;</div>
                <div class="line bdbso bdw3 bc1 marr1 padl3">&nbsp;</div>
                <div class="line bdbso bdw3 bc1 flex1">&nbsp;</div>
            </div>


            {% if page.code == "ABOUT_FEEDBACK" %}
                <div class=" mart30">
                    <div class="alert alert-success" style="display: none;" role="alert">
                        <a class="alert-link">提交成功</a>
                    </div>
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="exampleInputEmail1">意见内容</label>
                            <textarea id="content" class="form-control" rows="10"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">姓名/昵称</label>
                            <input id="name" type="email" class="form-control" id="exampleInputEmail1" placeholder="">
                        </div>
                        {#<div class="mart10"></div>#}
                        {#<div class="mart10"><textarea class="form-control" rows="10"></textarea></div>#}
                        <div class="mart10"><button id="submit" type="button" class="btn btn-primary">提交</button></div>
                    </form>
                </div>
            {% endif %}

            {% if list %}
                <div class="padt10">
                    {% if page.code == "ABOUT_CONTACT" %}
                        <script>var p =[],m=[];</script>
                        {#地图页面#}
                        <div class="tab_wrap bdc12">
                            <div class="tac row lh2 col-md-12">
                                {% for index,item in  list%}
                                    <div data-id="{{ item.id }}"
                                         class="tab tab{{ index }} col-md-2 col-sm-3 col-xs-3 padt5 padb5 {{ index == 0?'jb00 c13':'bc13 c11' }}">
                                        {{ item.title }}
                                    </div>
                                {% endfor %}
                            </div>
                            {% for index,item in list %}
                                <div class="row mart30 tab_content tab_content_{{ item.id }} " {{ index==0?'':'style="display: none"' }} >
                                    <div class="lh2 col-md-12">
                                        <h3>{{ item.title }}</h3>
                                        {% if  item.tel %}<div class="">固话：{{ item.tel }}</div>{% endif %}
                                        {% if  item.phone %}<div class="">手机：{{ item.phone }}</div>{% endif %}
                                        {% if  item.address %}<div class="">地址：{{ item.address }}</div>{% endif %}
                                        {% if  item.wechat %}<div class="flex-r flex-start"><div>微信：</div><div class="flex1"><img src="{{ item.wechat }}" style="width: 150px;height: 150px;" alt=""></div></div>{% endif %}
                                    </div>
                                    {#<div class="col-md-12"><div class=" con_l mart10" style="width: 100%;height: 360px;" id="allmap_{{ item.id }}">&nbsp;</div></div>#}

                                    {#<script type="text/javascript">#}
                                        {#$(function () {#}

                                            {#// 百度地图API功能#}
                                            {#var map_{{ item.id }} = new BMap.Map("allmap_{{ item.id }}");#}
                                            {#var point_{{ item.id }} = new BMap.Point({{ item.latlng }});#}
                                            {#var marker_{{ item.id }} = new BMap.Marker(point_{{ item.id }});#}
                                            {#// var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象#}
                                            {#map_{{ item.id }}.centerAndZoom(point_{{ item.id }}, 18);#}

                                            {#var top_right_navigation = new BMap.NavigationControl({#}
                                                {#anchor: BMAP_ANCHOR_TOP_RIGHT,#}
                                                {#type: BMAP_NAVIGATION_CONTROL_SMALL#}
                                            {#}); //右上角，仅包含平移和缩放按钮#}
                                            {#map_{{ item.id }}.addControl(top_right_navigation)#}
                                            {#setTimeout(function () {#}
                                                {#map_{{ item.id }}.addOverlay(marker_{{ item.id }});#}

                                            {#},Math.random() * 1000)#}
                                        {#})#}
                                    {#</script>#}
                                    <script type="text/javascript">
                                        $(function () {

                                            // 百度地图API功能
                                            {#var map_{{ item.id }} = new BMap.Map("allmap_{{ item.id }}");#}
                                            var point_{{ item.id }} = new BMap.Point({{ item.latlng }});
                                            var marker_{{ item.id }} = new BMap.Marker(point_{{ item.id }});
                                            p[{{ item.id }}] = new BMap.Point({{ item.latlng }});
                                            m[{{ item.id }}] = new BMap.Marker(point_{{ item.id }});
                                            // var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                                            {#map_{{ item.id }}.centerAndZoom(point_{{ item.id }}, 18);#}

//                                            var top_right_navigation = new BMap.NavigationControl({
//                                                anchor: BMAP_ANCHOR_TOP_RIGHT,
//                                                type: BMAP_NAVIGATION_CONTROL_SMALL
//                                            }); //右上角，仅包含平移和缩放按钮
                                            {#map_{{ item.id }}.addControl(top_right_navigation)#}
                                            {#setTimeout(function () {#}
                                                {#map_{{ item.id }}.addOverlay(marker_{{ item.id }});#}

                                            {#},Math.random() * 1000)#}
                                        })
                                    </script>
                                </div>
                            {% endfor %}
                            <div class=""><div class=" con_l mart10" style="width: 100%;height: 360px;" id="allmap">&nbsp;</div></div>

                            <script type="text/javascript">
                                $(function () {

                                    // 百度地图API功能
                                    var map = new BMap.Map("allmap");
                                    {#var point_{{ item.id }} = new BMap.Point({{ item.latlng }});#}
                                    {#var marker_{{ item.id }} = new BMap.Marker(point_{{ item.id }});#}
                                    // var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                                    {#map_{{ item.id }}.centerAndZoom(point_{{ item.id }}, 18);#}

                                    var top_right_navigation = new BMap.NavigationControl({
                                        anchor: BMAP_ANCHOR_TOP_RIGHT,
                                        type: BMAP_NAVIGATION_CONTROL_SMALL
                                    }); //右上角，仅包含平移和缩放按钮
                                    {#map_{{ item.id }}.addControl(top_right_navigation)#}
                                    {#setTimeout(function () {#}
                                        {#map_{{ item.id }}.addOverlay(marker_{{ item.id }});#}

                                    {#},Math.random() * 1000)#}


                                    $(".tab").mouseover(function () {
                                        console.log($(this).data("id"));
                                        map.centerAndZoom(p[$(this).data("id")], 18);
                                        map.addOverlay(m[$(this).data("id")], 18);
                                    })
                                    // var id = $(".tab0").data("id");
                                    map.centerAndZoom(p[$(".tab0").data("id")], 18);
                                    map.addOverlay(m[$(".tab0").data("id")], 18);

                                })
                            </script>
                        </div>


                        {#{% for item in list %}#}
                            {#<div class="lh2 mart10">#}
                                {#<h3>{{ item.title }}分院</h3>#}
                                {#{% if  item.tel %}<div class="">固话：{{ item.tel }}</div>{% endif %}#}
                                {#{% if  item.phone %}<div class="">手机：{{ item.phone }}</div>{% endif %}#}
                                {#{% if  item.address %}<div class="">地址：{{ item.address }}</div>{% endif %}#}
                                {#{% if  item.wechat %}<div class="flex-r flex-start"><div>微信：</div><div class="flex1"><img src="{{ item.wechat }}" style="width: 150px;height: 150px;" alt=""></div></div>{% endif %}#}
                            {#</div>#}
                            {#<div class="con_l mart10" style="width: 100%;height: 360px;" id="allmap_{{ item.id }}">&nbsp;</div>#}
                            {#<script type="text/javascript">#}
                                {#$(function () {#}
                                    {#// 百度地图API功能#}
                                    {#var map_{{ item.id }} = new BMap.Map("allmap_{{ item.id }}");#}
                                    {#var point_{{ item.id }} = new BMap.Point({{ item.latlng }});#}
                                    {#var marker_{{ item.id }} = new BMap.Marker(point_{{ item.id }});#}
                                    {#// var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象#}
                                    {#map_{{ item.id }}.centerAndZoom(point_{{ item.id }}, 16);#}
                                    {#map_{{ item.id }}.addOverlay(marker_{{ item.id }});#}
                                    {#var top_right_navigation = new BMap.NavigationControl({#}
                                        {#anchor: BMAP_ANCHOR_TOP_RIGHT,#}
                                        {#type: BMAP_NAVIGATION_CONTROL_SMALL#}
                                    {#}); //右上角，仅包含平移和缩放按钮#}
                                    {#map_{{ item.id }}.addControl(top_right_navigation)#}

                                {#})#}
                            {#</script>#}
                        {#{% endfor %}#}
                    {% else %}
                        {% for item in list %}
                            <a href="/file/info?id={{ item.id }}">
                                <div class="col-md-6 col-sm-12 col-xs-12 pos-r">
                                    <div class="w100 pad10">
                                        <img class="w100" style="height: 240px;" src="{{ item.pic }}" alt="">
                                    </div>
                                    <div class="fs14 c1 fwb pos-a l0 b0 r0 pad5 marb10">{{ item.title }}</div>
                                </div>
                            </a>
                        {% endfor %}
                    {% endif %}
                </div>
            {% else %}
                <div class="padt10">
                    {{ page.content|raw }}
                </div>
            {% endif %}

        </div>

    </div>


{% endblock %}

{% block myJs %}
    <script type="text/javascript" src="/web/api?v=1"></script>
    <script type="text/javascript" src="/web/getscript?v=1"></script>
    <script>
        $(function () {
            $("#submit").click(function () {
                var content = $("#content").val();
                var name = $("#name").val();
                $.post("{{ path("WebQuestionUserSubmit") }}",{content:content,name:name},function (res) {
                    console.log(res);
                    if (1 == res.s) {
                        // alert(res.i)
                        $(".alert").show();
                    }
                })

            });


        })
    </script>
{% endblock %}
